<template>
  <div id="Home">
    <!-- 头部 -->
    <hand-nav :shopingShow="shopingShow" :shoppingIN="shoppingIN" />
    <!-- 首页轮播图 -->
    <HomeSwiper />
    <!-- 首页导航 -->
    <HomeNav />
    <!-- 最热店铺 -->
    <HomeHotShop />
    <!-- 人才库 -->
    <HomeTalents />
    <!-- 为你推荐 -->
    <HomeRecommend :recommendData="recommendData" id="" />
  </div>
</template>

<script>
import HomeSwiper from "./HomeSwiper";
import HomeHotShop from "./HomeHotShop";
import HomeTalents from "./HomeTalents";
import HomeRecommend from "./HomeRecommend";
import HomeNav from "./HomeNav";
import api from "../../api";
export default {
  components: {
    HomeSwiper,
    HomeHotShop,
    HomeTalents,
    HomeRecommend,
    HomeNav
  },
  data() {
    return {
      shopingShow: true,
      shoppingIN: "shopping_A",
      recommendData: [],
      loading: false,
      flag: true,
      innerHeight: 0,
    };
  },
  mounted() {
    api.getRecommend().then((res) => {
      this.recommendData = res.data.list;
    });
    localStorage.setItem("navIndex",0)
  },
  created() {
    window.addEventListener("scroll", this.onScroll);
  },
  beforeDestroy(){
       window.removeEventListener("scroll",this.onScroll);
  },
  methods: {
    onScroll() {
      let innerHeight = document.querySelector("#Home").clientHeight;//页面高度
      let outerHeight = document.documentElement.clientHeight; //窗口高度
      let scrollTop = document.documentElement.scrollTop; //滚动高度
      // console.log(innerHeight);
      if (scrollTop + outerHeight + 50 >= innerHeight && this.flag) {
        this.flag = false;
        // console.log("到底了");
        // console.log(scrollTop + outerHeight + 50 ,innerHeight);
        // (this.loading = true),
          api.getRecommend().then((res) => {
            // console.log(res);
            if (res.status === 200) {
              this.recommendData = [...this.recommendData, ...res.data.list];
              this.flag = true;
              this.loading = false;
            }
          });
      }
    },
  },
};
</script>

<style lang="less" scoped>
#Home {
  padding-bottom: 30px;
}
</style>